<template>
  <a-card :bordered="false">
    <div class="table-page-search-wrapper">
      <a-form layout="inline">
        <a-row :gutter="24">
          <a-col :md="8" :sm="12">
            <a-form-item label="搜索类型" style="display: flex; align-items: center">
              <div style="display: flex">
                <a-select v-model="queryParam.searchType" placeholder="请选择" style="width: 160px">
                  <a-select-option v-for="(item, index) in condition.searchTypeList" :key="index" :value="item.key">{{ item.value }}</a-select-option>
                </a-select>
                <a-input v-model="queryParam.searchValue" placeholder="请输入" style="margin-left: 5px" />
              </div>
            </a-form-item>
          </a-col>
          <a-col :md="6" :sm="8">
            <a-form-item label="品牌">
              <a-select v-model="queryParam.brandList" placeholder="请选择" :getPopupContainer="triggerNode => triggerNode.parentNode" mode="multiple" show-search style="width: 220px">
                <a-select-option v-for="(item, index) in condition.brandList" :key="index" :value="item.key">{{ item.value }}</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :md="6" :sm="8">
            <a-form-item label="分类">
              <!-- <a-select v-model="queryParam.classifyList" placeholder="请选择" :getPopupContainer="triggerNode => triggerNode.parentNode" style="width: 200px">
                <a-select-option v-for="(item, index) in condition.classifyList" :key="index" :value="item.key">{{ item.value }}</a-select-option>
              </a-select> -->
              <a-tree-select
                v-model="queryParam.classifyList"
                style="width: 100%"
                :dropdownStyle="{ maxHeight: '476px' }"
                :tree-data="classifyList"
                tree-checkable
                allowClear
                placeholder="请选择"
                search-placeholder="Please select"
              />
            </a-form-item>
          </a-col>
          <a-col :md="4" :sm="12">
            <span class="table-page-search-submitButtons">
              <a-button type="primary" @click="reset">重置</a-button>
              <a-button style="margin-left: 20px" type="primary" @click="search">查询</a-button>
            </span>
          </a-col>
        </a-row>
      </a-form>
      <div>
        <div class="list-box">
          <div class="radio-group-box" v-if="tableData.length != 0">
            <div :style="radioStyle" class="radio-box" v-for="(item, index) in tableData" :key="index">
              <router-link :to="`/share/pos+/match/collocation/partake/detail/${item.lookId}/${packNo}`" target="_blank">
                <a-card style="width: 160px; cursor: pointer" :bordered="false">
                  <template #cover>
                    <div style="width: 164px; height: 207px">
                      <img :src="item.videoDetail.coverUrl.split(',')[0]" class="image" v-if="item.videoDetail.coverUrl" />
                      <img class="image" alt="example" :src="item.backgroundImage" v-else />
                    </div>
                  </template>
                  <p style="color: #333; font-weight: 700">{{ item.name }}</p>
                  <p style="color: #333">{{ item.classifyName }}</p>
                </a-card>
              </router-link>
            </div>
          </div>

          <a-empty style="margin: 200px 0" v-else />
          <div class="button-box">
            <a-pagination :total="total" :show-total="total => `共 ${total} 条数据`" :page-size="pageSize" show-quick-jumper @change="onChange" />
          </div>
        </div>
      </div>
    </div>
  </a-card>
</template>
<script>
import { conditionList, sharelist } from '@/api/pos/match'
import { themeClassify2 } from '@/api/pos/authority'
import { isArray } from 'lodash'
export default {
  props: {
    material: {
      typeof: String
    }
  },
  data() {
    return {
      visible: false,
      title: '选择素材',
      pageNo: 1,
      pageSize: 10,
      total: 0,
      queryParam: {
        classifyList: [],
        searchType: '',
        searchValue: '',
        brandList: []
      },
      classifyList: [], // 素材类型
      packNo: this.$route.params.id,
      totalPage: 0,
      condition: {},
      materialItem: '',
      radioStyle: '',
      tableData: []
    }
  },
  created() {
    this.postCondition()
    this.conditionTaskList()
    this.postThemeClassify()
  },
  methods: {
    conditionTaskList() {
      console.log(Array.isArray(this.queryParam.classifyList), 'this.queryParam.classifyList')
      if (Array.isArray(this.queryParam.classifyList) == true) {
        this.queryParam.classifyList = this.queryParam.classifyList
      } else {
        if (this.queryParam.classifyList && this.queryParam.classifyList.length > 0) {
          this.queryParam.classifyList = this.queryParam.classifyList.split(',')
        }
      }

      const data = {
        packNo: this.packNo,
        ...this.queryParam,
        current: this.pageNo,
        size: this.pageSize
      }

      sharelist(data).then(res => {
        if (res.code === 200) {
          console.log(res, 'res')
          this.tableData = res.data.records
          this.total = res.data.total
        }
      })
    },
    postCondition() {
      let params = {
        channelType: 'retailTheme'
      }
      conditionList(params).then(res => {
        if (res.code == 200) {
          this.condition = res.data
        }
      })
    },
    reset() {
      this.queryParam = {
        classifyList: [],
        size: 10,
        current: 1
      }
      this.conditionTaskList()
    },
    onChange(page, pageSize) {
      this.pageNo = page
      this.pageSize = pageSize
      this.conditionTaskList()
    },
    search() {
      this.queryParam.current = 1
      this.conditionTaskList()
    },
    // 素材类型
    postThemeClassify() {
      themeClassify2().then(res => {
        if (res.code == 200) {
          let list = res.data.map(item => {
            let li = {
              title: item.name,
              value: item.code,
              key: item.code,
              children: item.childList.map(item2 => {
                return {
                  title: item2.name,
                  value: item2.code,
                  key: item2.code,
                  children: item2.childList.map(item3 => {
                    return {
                      title: item3.name,
                      value: item3.code,
                      key: item3.code
                    }
                  })
                }
              })
            }
            return li
          })
          this.classifyList = list
        } else {
          this.$message.error(res.msg || res.message)
        }
      })
    },
    lookClick(id) {
      window.open(`/share/pos+/match/collocation/partake/detail/${id}/${this.packNo}`)
    }
  }
}
</script>
<style lang="less" scoped>
/deep/ .ant-radio-inner {
  border-radius: 0;
}
/deep/ .ant-radio-checked:after {
  animation-play-state: paused;
  border-radius: 0;
  border: 0;
}
/deep/ .ant-card-body {
  padding: 10px 5px 0 5px;
  box-sizing: border-box;
}
/deep/ .ant-card-body p {
  // max-width: 150px;
  white-space: normal;
  word-wrap: break-word;
}
.image {
  max-height: 240px !important;
  width: 100%;
  height: 100%;
}

/deep/ .ant-modal-content {
  height: 800px;
  overflow-y: scroll;
}

.radio-group-box {
  display: flex;
  flex-wrap: wrap;
  // justify-content: space-between;
}
.radio-box {
  display: flex;
  margin-right: 20px;
  margin-top: 30px;
  border: 1px solid #ccc;
  padding: 6px 12px;
}

p {
  color: #999;
}
.button-box {
  display: flex;
  justify-content: right;
  margin-bottom: 24px;
}
</style>
